<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="bg"></div>
    <div class="admin_box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="pathway_box">
        <div class=" pathway pathway_1">
            <div class=" box box_1">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class=" pathway pathway_2">
            <div class=" box box_2">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class=" pathway pathway_3">
            <div class=" box box_3">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class=" pathway pathway_4">
            <div class=" box box_4">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class=" pathway pathway_5">
            <div class=" box box_5">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        function init() {
            var $Wrapper = $('.pathway_box');
            $Wrapper.css({
                transform: 'translateX(-50%) translateY(-50%) scale(1)',
                transition: 'transform 2s'
            });
            setTimeout(function() {
                bindEvent();
            }, 2000)
        }
        init();
        function bindEvent() {

            var $Wrapper = $('.pathway_box');
            $Wrapper.css({
                transition: ''
            })
            var body = $('body');
            var lastX, lastY, nowX, nowY, difX = 0, difY = 0;
            var roY = 0, roX = 0;
            var timer = null;
            body.on('mousedown', function(e) {
                clearInterval(timer);
                e = e || window.event;
                lastX = e.clientX;
                lastY = e.clientY;
                body.on('mousemove', function(e) {
                    e = e || window.event;
                    nowX = e.clientX;
                    nowY = e.clientY;
                    difX = nowX - lastX;
                    difY = nowY - lastY;
                    roY += difX * 0.2;
                    roX += difY * 0.2;
                    $Wrapper.css({
                        'transform': 'translateX(-50%) translateY(-50%) rotateX('+ roX +'deg) rotateY('+ roY +'deg)',
                        'cursor': 'move'
                    });
                    lastX = nowX;
                    lastY = nowY;
                });
                body.on('mouseup', function() {
                   body.off('mousemove');
                   clearInterval(timer);
                   timer = setInterval(function() {
                       difX *= 0.98;
                       difY *= 0.98;
                       roY += difX * 0.2;
                       roX += difY * 0.2;
                       console.log(Math.abs(difX), Math.abs(difY));
                       $Wrapper.css({
                           'transform': 'translateX(-50%) translateY(-50%) rotateX('+ roX +'deg) rotateY('+ roY +'deg)',
                           'cursor': 'pointer'
                       });
                       if (Math.abs(difX) < 0.1 && Math.abs(difY) < 0.1) {
                           clearInterval(timer);
                       }
                   }, 20);
                });
                return false;
            });
        }
    </script>
</body>
</html>
